import React, { useRef, useState } from 'react'
import { View, Image, Text } from '@tarojs/components'
// import homeH from '../../../../../assets/img/homeH.png'
// import { Icon } from '@/components/Icon'
import Price from '@/components/Price'
import './index.scss'
import { CartItemModel } from '@/model/declare'
import { Stepper } from '../Stepper'
import { useLocalStore } from 'mobx-react'
import { cartModel } from '@/model/CartModel'

// export interface {}
const CartItem: React.FC<CartItemModel> = ({
  Good,
  number
}) => {

  const store = useLocalStore(()=> cartModel)
  return (
    <View className='xxm-cart-item'>
      <View className='xxm-left'>
        <Image className='xxm-cover' src={Good.main_pic} />
      </View>
      <View className='xxm-right'>
        <View className='xxm-name'>
          {Good.name}
        </View>
        <View className='xxm-dis'>
          {Good.brief}
        </View>
        <View className='xxm-buttom'>
          <View className='xxm-price'>
            <Price price={Good.price} type={'sale'}></Price>
            <Price price={Good.market_price} type={'lineation'}></Price>
          </View>
          <View className='xxm-number'>
             <Stepper value={number} 
             
               onChange = {(type, value)=>{
                  store.addCart({
                    Good,
                    number: value
                  })   
               }}
             />
          </View>
        </View>
      </View>
    </View>
  )
}


export default CartItem